<template>
	<div class="container">
		<v-header :title="title"></v-header>
		<div class="publicity">
			<div class="publicity-list">
				<div class="publicity-list-item">
					<div>
						顶部文案
					</div>
					<div>
						看图直播开放平台
					</div>
				</div>
				<div class="publicity-list-item">
					<div>
						顶部宣传标题
					</div>
					<div class="mui-switch mui-switch-mini mui-switch-blue" ref="titleSet" @click="titleSet()">
		              <div class="mui-switch-handle"></div>
		            </div>
				</div>
				<div class="publicity-list-item">
					<div>
						顶部宣传图设置
					</div>
					<div class="mui-switch mui-switch-mini mui-switch-blue" ref="imgSet" @click="imgSet()">
		              <div class="mui-switch-handle"></div>
		            </div>
				</div>
			</div>
			<div class="publicity-btn" v-if="!btnStatus">
				去设置宣传图
			</div>
			<div class="publicity-btn active" v-else @click="routerPush('/album/publicity/publicityMap')">
				去设置宣传图
			</div>
		</div>
	</div>
</template>

<script>
	import VHeader from 'components/v-header'
	import VMask from 'components/v-mask'
	import Loading from 'components/loading'
	import BottomBar from 'components/bottom-bar'
	
	export default {
		components: {
			BottomBar,
			Loading,
			VMask,
			VHeader
		},
		data() {
			return {
				title:'顶部宣传设置', //标题文字
				titleShow: false,    //顶部宣传标题设置状态
				imgShow: false      //顶部宣传图设置状态
			}
		},
		methods: {
			imgSet() {
				this.imgShow = !this.imgShow
				if(this.imgShow) {
					this.$refs.imgSet.setAttribute('class','mui-switch mui-switch-mini mui-switch-blue mui-active')					
				} else {
					this.$refs.imgSet.setAttribute('class','mui-switch mui-switch-mini mui-switch-blue')
				}
			},
			titleSet() {
				this.titleShow = !this.titleShow
				if(this.titleShow) {
					this.$refs.titleSet.setAttribute('class','mui-switch mui-switch-mini mui-switch-blue mui-active')					
				} else {
					this.$refs.titleSet.setAttribute('class','mui-switch mui-switch-mini mui-switch-blue')
				}
			},
		},
		mounted() {
			this.titleSet()
		},
		computed: {
			btnStatus() {
				if(this.titleShow && this.imgShow) {
					return true
				} else {
					return false
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'
	.container
		position fixed
		display flex
		flex-direction column
		width 100%
		height 100%
		background $color-bg-gray
		.publicity
			padding 10px 0
			.publicity-list
				.publicity-list-item
					margin-bottom 1px
					height 50px
					padding 0 20px
					font-size $font-size-small
					align-items center
					display flex
					justify-content space-between
					background #fff
			.publicity-btn
				margin 20px auto
				width 300px
				padding 15px
				text-align center
				border-radius 3px
				background #9fa7b4
				color #fff
			.active
				background $color-theme
</style>